﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer Blog - 后台管理系统</title> 
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/resource/js/webuploader-0.1.5/webuploader.css">
    <link rel="stylesheet" type="text/css" href="/resource/js/jQueryMessage/css/message.skin.css" />
    <style type="text/css">
    .file-item{display:flex;align-items: center;height: 50px;justify-content: space-between;}
   	.file-item .info,.file-item .state{margin:0;padding:0;}
   	.file-item .state{margin-left:50px;}
   	.file-item .close{cursor: pointer;}
    </style>
</head>

<body>
<div class="row">
    <div class="col-md-12">
    	<h1 class="panel-heading">备份/还原</h1>
        <!--breadcrumbs start -->
        <ul class="breadcrumb">
			<li><a href="/admin/dashboard/toIndex"><i class="fa fa-home"></i> 首页</a></li>
				<li class="active">备份/还原</li>
		</ul>
        <!--breadcrumbs end -->
    </div>
</div>
<div class="row">
	<div class="col-lg-12">
		<section class="panel">
		    <div class="panel-body">
		        <form class="col s12" id="form1" method="POST">
		        	<div class="form-group form-control-medium">
						<label for="imagePath">选择数据库文件：</label>
						<div id="uploader" class="wu-example">
						    <!--用来存放文件信息-->
						    <div id="thelist" class="uploader-list"></div>
						    <div class="btns">
						        <div id="picker">选择文件</div>
						    </div>
						</div>
					</div>
		            <div class="form-btn-group-left">
		            	<button type="button" class="btn btn-info" onclick="confrim();">还原</button>
		            </div>
		        </form>
		    </div>
		</section>
	</div>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="confrim-dialog" class="modal fade">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                  <h4 class="modal-title">操作提示？</h4>
              </div>
              <div class="modal-body">
              	<div class="alert alert-block alert-danger">
                   <strong>注意!</strong> 备份还原操作，会对原数据库数据表进行删除重建。
                </div>
				<h4 class="modal-title">您确定要执行还原操作吗？</h4>
              </div>
              <div class="modal-footer">
              	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="restore();">确定</button>
            	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<!-- jQuery 2.0.2 -->
<script src="/resource/js/jquery.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="/resource/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/resource/js/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript" src="/resource/js/jQueryMessage/js/jquery.plugin.message.js"></script>
<script type="text/javascript">
var files = 0;
$(document).ready(function () {
	//初始化上传组件
	initUploader("picker","file-priview");
})

//初始化上传组件
function initUploader(picker,el){
   	uploader = WebUploader.create({
   		auto: true,
        // swf文件路径
        swf: '/resource/js/webuploader-0.1.5/Uploader.swf',
        // 文件接收服务端。
        server: '/upload/uploadFile',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#' + picker,
        fileNumLimit: 100,
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        accept: {
        	title: 'Images',
        	extensions: 'sql,txt',
        }
    });
    // 验证文件格式以及文件大小
    uploader.on("error", function (type) {
    	var msg = "";
        if (type == "Q_TYPE_DENIED") {
            msg = "请上传SQL、TXT格式文件";
        }else {
            msg = "上传出错！请检查后重新上传！错误代码" + type;
        }
		$("body").MessageBox({
			type: 'error',
			message: msg,
			timeout:3000,
			callbak:null
		});
    });
   	// 当有文件被添加进队列的时候
   	uploader.on('fileQueued', function(file) {
   		$("#form1").prepend("<input id='file-input-" + file.id + "' type='hidden' name='files[" + files + "]' />");
   		
   	    $("#thelist").append( '<div id="' + file.id + '" class="file-item">' +
   	        '<h4 class="info">' + file.name + '</h4>' +
   	        '<p class="state">等待上传...</p>' +
   	        '<i class="close fa fa-times-circle" onclick="removeFile(\''+file.id+'\')"></i>' +
   	    '</div>' );
   		
   		files++;
   	});
    uploader.on('uploadSuccess', function(file, response) {
    	$("#file-input-"+file.id).val(response.data.filepath);
        $("body").MessageBox({
			type: 'success',
			message: '上传成功！',
			timeout:3000,
			callbak:null
		});
        $("#" + file.id + ">.state").html('上传成功！');
    });
    uploader.on('uploadError', function( file ) {
    	$("body").MessageBox({
			type: 'error',
			message: '上传失败！',
			timeout:3000,
			callbak:null
		});
    });
}

//删除文件上传队列
function removeFile(id){
	uploader.removeFile(id, true);
	$("#file-input-"+ id).remove();
	$("#" + id).remove();	
}

function confrim(){
	var inputs = $("input[id^='file-input-']");
	if(inputs.length <= 0){
		$("body").MessageBox({
			type: 'error',
			message: "请先选择备份文件！",
			timeout:3000,
			callbak:null
		});
		return;
	}
	$("#confrim-dialog").modal();
}
//还原数据库
function restore(){
	var inputs = $("input[id^='file-input-']");
	
	var datas = new Array();
	for(var i = 0;i < inputs.length;i++){
		datas.push($(inputs[i]).val());
	}
	
	$.ajax({
		url : "/admin/database/restore",
		contentType : 'application/json',
		data : JSON.stringify(datas),
		type : "POST",
		dataType : "JSON",
		success : function(result) {
			$("#confrim-dialog").modal('hide');
			if(result.success){
				$("body").MessageBox({
					type: 'success',
					message:result.info,
					timeout:3000,
					callbak:null
				});
			}else{
				$("body").MessageBox({
					type: 'error',
					message:result.info,
					timeout:3000,
					callbak:null
				});
			}
		}
	});
}
</script>			
</body>
</html>
